<template>
  <div class="menu">
    <!-- 菜单组件 -->
    <div v-for="(item, index) in menuList" :key="item.title + index">
      <div :class="{ itemDiv: true, finger: true, isClick: item.isClick }" v-if="item.children.length === 1" @click="goPage(item, index)">
        <img :src="item.src" class="img" v-show="!item.isClick" />
        <img :src="item.clickSrc" :class="{ img: true, isClickImg: item.isClick }" v-show="item.isClick" />
        {{ item.children[0].title }}
      </div>
      <div v-else>
        <div :class="{ itemDiv: true, finger: true, isClick: item.isClick }" @click="openSubMenu(item, index)">
          <img :src="item.src" :class="{ img: true }" v-show="!item.isClick" />
          <img :src="item.clickSrc" :class="{ img: true, isClickImg: item.isClick }" v-show="item.isClick" />
          {{ item.title }}
          <img src="../assets/images/btm.png" class="rightImg" v-show="!item.isClick" />
          <img src="../assets/images/top.png" class="rightImg" v-show="item.isClick" />
        </div>
        <transition name="slide-fade">
          <div v-if="item.isClick">
            <div v-for="(subItem, subIndex) in item.children" :key="subItem.title + subIndex">
              <div
                :class="{
                  subitemDiv: true,
                  finger: true,
                  isSubClick: subItem.isClick,
                }"
                @click="goSubPage(subItem, index, subIndex)"
                v-if="!subItem.children"
              >
                {{ subItem.title }}
              </div>
              <div v-else>
                <div class="thridTitle">{{ subItem.title }}</div>
                <div
                  v-for="(thirdItem, thirdIndex) in subItem.children"
                  :key="thirdItem + thirdIndex"
                  :class="{
                    subitemDiv: true,
                    finger: true,
                    isSubClick: thirdItem.isClick,
                  }"
                  @click="goThirdPage(thirdItem, index, subIndex, thirdIndex)"
                >
                  {{ thirdItem.title }}
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
let Base64 = require('js-base64').Base64
export default {
  data() {
    return {
      menuList: [],
      showIndex: true,
    }
  },
  computed: {
    ...mapState(['breadcrumb']),
  },
  created() {
    this.queryMenuList()
    let setMenu = sessionStorage.getItem('=-dwnwnxi0=')
    this.getDefault(this.$route)
    if (setMenu) {
      let list = Base64.decode(sessionStorage.getItem('=-dwnwnxi0='))
      let ayy = list.split(',')
      this.$store.commit('setBreadcrumb', ayy)

      return null
    }
  },
  watch: {
    $route: function (route, t) {
      this.getDefault(route)
    },
  },
  methods: {
    getDefault(route) {
      let routeName = route.name
      this.menuList.forEach((mItem, mIndex) => {
        mItem.isClick = false
        mItem.children &&
          mItem.children.forEach((i, idx) => {
            i.isClick = false
            if (routeName === i.name) {
              mItem.isClick = true
              i.isClick = true
              let array = []
              array[0] = mItem.title
              array[1] = i.title
              this.$store.commit('setBreadcrumb', array)
            }
          })
      })
    },
    // 打开二级菜单
    openSubMenu(item) {
      // this.$store.commit('setRoutetrPath', arr)
      // 点击的已打开的1级菜单
      if (item.isClick && item.isOpen) {
        item.isClick = false
        item.isOpen = false
        return
      }
      // 点击未打开的1级菜单
      for (let i = 0; i < this.menuList.length; i++) {
        this.menuList[i].isClick = false
        if (item.title === this.menuList[i].title) {
          item.isClick = true
          item.isOpen = true
        }
      }
    },
    // 直接去1级页面
    goPage(item) {
      for (let i = 0; i < this.menuList.length; i++) {
        this.menuList[i].isClick = false
        if (item.link === this.menuList[i].link) {
          item.isClick = true
        }
        for (let j = 0; j < this.menuList[i].children.length; j++) {
          this.$set(this.menuList[i].children[j], 'isClick', false)
        }
      }
      if (this.$route.path === item.children[0].path) {
        return
      }
      this.$router.push(item.children[0].path)
      let array = []
      array[0] = item.title
      this.$store.commit('setBreadcrumb', array)
    },
    // 直接去2级页面 -- 子级没列表菜单
    goSubPage(item, index, subIndex) {
      if (item.path === this.$route.path) {
        return null
      }
      for (let i = 0; i < this.menuList.length; i++) {
        for (let j = 0; j < this.menuList[i].children.length; j++) {
          this.$set(this.menuList[i].children[j], 'isClick', false)
          if (item.func_name === this.menuList[i].children[j].func_name) {
            item.isClick = true
          }
          if (this.menuList[i].children[j].children) {
            for (let h = 0; h < this.menuList[i].children[j].children.length; h++) {
              this.$set(this.menuList[i].children[j].children[h], 'isClick', false)
            }
          }
        }
      }
      this.$router.push(item.path)
      let array = []
      array[0] = this.menuList[index].title
      array[1] = item.title
      this.$store.commit('setBreadcrumb', array)
    },
    // 查询菜单列表
    queryMenuList() {
      this.menuList = [
        {
          title: '首页',
          src: require('../assets/images/icon_default1.png'),
          clickSrc: require('../assets/images/icon_click1.png'),
          children: [
            {
              title: '首页',
              path: '/main',
              name: 'main',
            },
          ],
        },
        {
          title: '基础管理',
          src: require('../assets/images/icon_default2.png'),
          clickSrc: require('../assets/images/icon_click2.png'),
          children: [
            {
              title: '厂家管理',
              path: '/supplierManage',
              name: 'supplierManage',
            },
            {
              title: '厂家管理',
              path: '/factoryManage',
              name: 'factoryManage',
            },
            {
              title: '产品管理',
              path: '/productManage',
              name: 'productManage',
            },
          ],
        },
        {
          title: '订单管理',
          src: require('../assets/images/icon_default3.png'),
          clickSrc: require('../assets/images/icon_click3.png'),
          children: [
            {
              title: '医生管理',
              path: '/doctorManage',
              name: 'doctorManage',
            },
          ],
        },
        {
          title: '业务管理',
          src: require('../assets/images/icon_default4.png'),
          clickSrc: require('../assets/images/icon_click4.png'),
          children: [
            {
              title: '团队管理',
              path: '/teamList',
              name: 'teamList',
            },
            // {
            //   title: '团队审核',
            //   path: '/reviewList',
            //   name: 'reviewList',
            // },
          ],
        },
        {
          title: '结算协同',
          src: require('../assets/images/icon_default5.png'),
          clickSrc: require('../assets/images/icon_click5.png'),
          children: [
            {
              title: '结算协同',
              path: '/attentionStatisticsList',
              name: 'attentionStatisticsList',
            },
          ],
        },
      ]
      for (let i = 0; i < this.menuList.length; i++) {
        this.$set(this.menuList[i], 'isClick', false)
        this.$set(this.menuList[i], 'isOpen', false)
        for (let j = 0; j < this.menuList[i].children.length; j++) {
          this.$set(this.menuList[i].children[j], 'isClick', false)
          if (this.menuList[i].children[j].children) {
            for (let h = 0; h < this.menuList[i].children[j].children.length; h++) {
              this.$set(this.menuList[i].children[j].children[h], 'isClick', false)
            }
          }
        }
      }
      // 页面刷新，导航栏效果显示待处理
      if (this.$route.path === '/home') {
        this.$set(this.menuList[0], 'isClick', true)
        this.$set(this.menuList[0], 'isOpen', true)
        this.$set(this.menuList[0].children[0], 'isClick', true)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.menu {
  font-size: 20px;
}
.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
.itemDiv {
  color: #7f8cd0;
  font-size: 18px;
  display: flex;
  align-items: center;
  height: 70px;
}
.subitemDiv {
  padding-left: 90px;
  color: #7f8cd0;
  font-size: 20px;
  height: 70px;
  display: flex;
  align-items: center;
}
.thridTitle {
  margin-left: 60px;
  color: #ccc;
  font-size: 12px;
}
.isClick {
  background: #3f5094;
  color: #fff !important;
  box-sizing: border-box;
  border-left: 6px solid #426cfc;
  box-sizing: border-box;
}
.isSubClick {
  color: #fff !important;
  background: #426cfc !important;
}
.img {
  margin-right: 14px;
  margin-left: 45px;
  width: 30px;
  height: 30px;
}
.isClickImg {
  margin-left: 39px !important;
}
.rightImg {
  margin-left: 82px;
}
</style>
